<!--
 @description 制造/生产报工tab切换内容页
 @fileName TabPage.vue
 @author zengqiongying
 @created 2021/06/28 13:57:44
-->
<template>
  <div class="main-page">
    <div class="wrapper">
      <div class="main-title" @click.stop="openInstrusction('produces','6month')">
        <div style="flex:1;display:flex;align-items: center;">
          {{ selectType }}产量近6月趋势({{ selectType==='床垫'?'张':'套' }})
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="ft12 color-99 fw-normal">
          本年总产量:<span class="color-red">{{ yearTotal | filterForamtThousand }}</span>{{ selectType==='床垫'?'张':'套' }}
        </div>
        <!-- <div class="chart-dot">
            <div class="dot green">今年</div>
            <div class="dot yellow">去年</div>
          </div> -->
      </div>
      <six-month-chart :select-type="selectType" />
    </div>
    <div class="wrapper">
      <div class="main-title" @click.stop="openInstrusction('produces','30day')">
        {{ selectType }}产量近30日趋势({{ selectType==='床垫'?'张':'套' }})
        <img class="icon_inst" src="@/assets/image/icon_instructions.png">
      </div>
      <month-chart :select-type="selectType" @get-complete-date="handleGetCompleteDate" />
    </div>
    <div class="wrapper">
      <div class="main-title">
        <div style="flex:1;display:flex;align-items: center;" @click.stop="openInstrusction('produces','production')">
          {{ selectType }}分厂产量({{ selectType==='床垫'?'张':'套' }})
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="ft12 color-99 fw-normal">{{ completeDate }}</div>
      </div>
      <factory-bar-chart :select-type="selectType" :select-date="completeDate" />
    </div>
  </div>
</template>

<script>
import SixMonthChart from '@/components/produces/SixMonthChart'
import MonthChart from '@/components/produces/MonthChart'
import FactoryBarChart from '@/components/produces/FactoryBarChart'
import { parseTime } from '@/utils'
import { getProducesYearQuantity } from '@/apis/produces'
export default {
  name: 'ProducesTabPage',
  components: { SixMonthChart, MonthChart, FactoryBarChart },
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    },
    selectType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      yearTotal: '-', // 本年总产量
      completeDate: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  watch: {
    selectType(val, oldVal) {
      this.getProducesTotal()
    }
  },
  created() {
    this.getProducesTotal()
  },
  methods: {
    // 获取年总产量
    getProducesTotal() {
      getProducesYearQuantity(this.selectType).then(res => {
        this.yearTotal = res.data || '-'
      })
    },
    handleGetCompleteDate(date) {
      this.completeDate = parseTime(date, '{y}-{m}-{d}')
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
